<template>
  <el-container class="layout-container-demo" style="min-height: 100vh">
    <div style="height: 100%">
      <el-container class="container">
        <el-aside width="50">
          <Aside :menuData="menuData"></Aside>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
  </el-container>
</template>

<script>
import Aside from "@/components/Aside";
import Header from "@/components/Header";
import Main from "@/components/Main";
import menuData from "../../mock/warehouse.json"
export default {
  beforeRouteEnter(to, from, next) {
    document.querySelector('body').setAttribute('style','margin:0;padding:0')
    next()
  },
  name: "warehouse",
  data(){
    return {
      menuData
    }
  },
  methods:{
    setData(){
    }
  },
  components  : {
    Aside,
    Header,
    Main,
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #D3DCE6;
  color: #a88787;
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;

}

body > .el-container {
  margin-bottom: 40px;
  height: 100%;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.container{
  height: 100%;
  width: 100%;
  position: absolute;
}

.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>